<style type="text/css">


/*手机自适应*/
@media screen and (max-width: 767px){
	.nav_ul{
		display: none;
	}
	
	.loginbtn{
		display: none;
	}

	.regbtn{
		display: none;
	}
	
	.title_bars{
		float: right;
		color: #FFFFFF;
		font-size: 30px;
		margin-top: 20px;
		display: block;
	}
	
	.top{
		border:0px solid #FFFFFF;
		width:100%;
		height:60px;
	}
	
}


/*手机横屏自适应*/
@media screen and (max-width: 737px) and (min-width: 567px){
	.title_bars{
		float: right;
		color: #FFFFFF;
		font-size: 30px;
		margin-top: 3%;
		display: block;
	}

}

/*平板自适应*/
@media screen and (max-width: 991px) and (min-width: 768px){
	.title_bars{
		display: none;
	}

}

/*普通电脑屏幕自适应*/
@media screen and (min-width: 992px){
	.title_bars{
		display: none;
	}
	
	.top{
		border:0px solid #FFFFFF;
		width:100%;
		height:90px;
	}
}



.title{
	border: 0px solid #FFFFFF;
	margin:0 auto;
	width:82%;
	height:100%;
}

.logo{
	border:0px solid #FFFFFF;
	float:left;
	background-color: #FFFFFF;
	width:70px;
	height:70%;
}

.nav_ul{
	float:right;
	font-weight:bold;
	font-family: Raleway,Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,sans-serif;
	font-size: 15px;
	
}

.navigation{
	text-align:center;
	border:0px solid #FFFFFF;
	display: inline;
	float:left;
	color:hsla(0,0%,100%,.7);
	width:100px;
	height:90px;
	line-height:90px;
	margin-top:-10px;
	background-color:transparent;
	position: relative;
}

.navigation:hover{
	color:#FFFFFF;
}

.loginbtn{
	border:0px solid #FFFFFF;
	float:right;
	background-color:#a788d7;
	text-align:center;
	width:68px;
	height:50px;
	margin-top:20px;
	margin-left:5px;
	position: relative;
}

.login{
	font-weight:bold;
	font-family: Raleway,Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,sans-serif;
	font-size: 15px;
	color:#eee;
	
}

.loginbtn:hover{
	background-color:#9578C2;
	text-decoration:none;
}

.regbtn{
	background-color:#387DBE;
}

.regbtn:hover{
	background-color:#316DA6;
}

</style>

 
 <div class="top" data-am-sticky>
	<div class="title" data-am-scrollspy="{animation: 'fade'}">
		<!-- <img class="logo" src="img/logo.png"> -->
		<div class="am-icon-qq am-icon-sm am-icon-btn am-primary"></div>
		
		<!-- 手机 -->
		<span class="am-icon-bars title_bars" data-am-offcanvas="{target: '#doc-oc-demo2'}"></span>
		<!-- 侧边栏内容 -->
		<div id="doc-oc-demo2" class="am-offcanvas">
  			<div class="am-offcanvas-bar">
    			<div class="am-offcanvas-content">
      				<ul class="am-nav">
					  <li><a href="#">首页</a></li>
					  <li class="am-nav-header">问答</li>
					  <li><a href="#">社区</a></li>
					  <li class="am-nav-divider"></li>
					  <li><a href="member/login.html">登录</a></li>
					  <li><a href="member/register.html">注册</a></li>
					</ul>
			    </div>
			 </div>
		</div>
		
		<a href="#">
			<button type="button" class="am-btn loginbtn regbtn" style="outline:none;">
				<div class="login">注册</div>
			</button>
		</a>
		<a href="#">
			<button type="button" class="am-btn loginbtn" style="outline:none;">
				<div class="login">登录</div>
			</button>
		</a>
		<ul class="nav_ul">
			<li class="navigation">
				<a href="#">
					<div class="navigation fade">首页</div>
				</a>
			</li>
			<li class="navigation">
				<a href="#">
					<div class="navigation fade">问答</div>
				</a>
			</li>
			<li class="navigation">
				<a href="#">
					<div class="navigation fade">社区</div>
				</a>
			</li>
		</ul>
		
	</div>
	
	</div>
	<!-- 设置滚动监听-->
	<div class="temp" data-am-scrollspy></div>
	
<script type="text/javascript">
$(".fade").mouseover(function(){
	$(this).fadeOut(200);
	$(this).fadeIn(200);
});

$(function() {
  $('.temp').on('inview.scrollspy.amui', function() {
	  $('.top').css({"background-color":"transparent","height":"90px","box-shadow":"0px 0px 0px #D8D8D8"});
	  $('.navigation').css({"color":"hsla(0,0%,100%,.7)","height":"90px","line-height":"90px"});
	  $('.loginbtn').css({"margin-top":"20px"});
	  $('.fade').animate({'top':'0px'},200);
	  $('.loginbtn').animate({'top':'0px','height':'50px'},200); 
	  $('.title_bars').css({"color":"#FFFFFF"});
  }).on('outview.scrollspy.amui', function() {
	$('.top').animate({backgroundColor:'#FFFFFF',height:'60px'},200);
  	$('.top').css({"box-shadow":"3px 3px 3px #D8D8D8"});
  	$('.fade').animate({'top':'-15px'},200);
  	$('.loginbtn').animate({'top':'-13px','height':'40px'},200);
  	$('.navigation').css({"color":"rgb(129, 138, 145)"});
  	$('.title_bars').css({"color":"#000000"});
  });
	  
});

$youziku.load(".subtitle3", "f9803ae6218d4cb885404729e110fcf9", "minijianxiyuan");
$youziku.draw();

</script>